<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            font-size: 12px;
            margin: 0;
        }

        nav {
            height: 40px;
            border-bottom: 1px solid #ccc;
        }

        ul {
            list-style-type: none;
            padding-left: 0;
            margin: 0;
            height: 40px;
        }

        li {
            text-align: center;
            font-size: 1.2rem;
            width: 200px;
            float: left;
            height: 40px;
            cursor: pointer;
        }

        ul>a {
            color: blue;
            text-decoration: none;
        }

        li>span {
            line-height: 40px;
        }
    </style>
</head>

<body>
    <nav>
        <ul id="menu">
            <li data-url="visitor"><span>游客</span></li>
            <li data-url="manager"><span>管理员</span></li>
            <li data-url="administrator"><span>超级管理员</span></li>
        </ul>
    </nav>
    <article id="insertPoint"></article>
</body>

</html>
<script>
    document.getElementById("menu").addEventListener('click', event => {
        let parameter;
        if (event.target.parentNode.dataset.url) {
            parameter = event.target.parentNode.dataset.url;
        } else if (event.target.dataset.url) {
            parameter = event.target.dataset.url;   //获取要显示的模块的参数
        }
        let url = location.href;        //获取当前页面的地址信息
        //检测url后缀是否是.html，如果不是则查找最后一个“/”及其之后的文本，删除之。
        if (!url.endsWith(".html")) {
            let index = url.lastIndexOf("/");
            url = url.substring(0, index);
        }
        //路由，根据不同的模块参数，加载不同的模块
        switch (parameter) {
            case "visitor":
                document.getElementById("insertPoint").innerHTML = "显示游客信息";
                break;
            case "manager":
                document.getElementById("insertPoint").innerHTML = "显示管理员信息";
                break;
            case "administrator":
                document.getElementById("insertPoint").innerHTML = "显示超级管理员信息";
                break;
        }
        url += `/${parameter}`;     //重构当前页面的url
        history.pushState({}, "", url);   //把实际上并不存在的url，压入到history中,以保证浏览器的上一页和下一页按钮可用。
    }, false);
</script>